<template>
  <div class="layout tixiansss">

    <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate">
      <FormItem label="提现审核是否开启">
        <i-switch v-model="formValidate.apply" style="margin-top:7px;"><span slot="open">开</span>
          <span slot="close">关</span>
        </i-switch>
      </FormItem>
      <FormItem label="个人劳务报酬预扣预缴">
        <Table :loading="loading" border :columns="columns" :data="data" ref="table">
          <!-- 页面展示 -->
          <template slot-scope="{ row }" slot="title">
            <div v-if="row.level == '1'">
              <Input type="number" v-model="formValidate.tax1" @on-change="chaoguo(row)">
                <span slot="prepend">不超过</span>
                <span slot="append">元</span>
              </Input>
            </div>
            <div v-if="row.level == '2'" style="display: flex">
              <Input type="number" v-model="title2" disabled>
                <span slot="prepend">超过</span>
                <span slot="append">元</span>
              </Input>
              <span style="margin-right: 10px">至</span>
              <Input type="number" v-model="formValidate.tax2" @on-change="nochao(row)">
                <span slot="append">元</span>
              </Input>
            </div>
            <div v-if="row.level == '3'">
              <Input type="number" v-model="title4" disabled >
                <span slot="prepend">超过</span>
                <span slot="append">元</span>
              </Input>
            </div>
            <!-- <Input v-if="row.level == '1' || row.level == '3'" type='number' v-model="row.title">
              <span slot="append">元</span>
            </Input> -->
            <!-- <Input clearable v-model="row.title" placeholder="请输入预扣预缴所得额" style="width: 150px" /> -->
          </template>
          <template slot-scope="{ row }" slot="ownerCardno">
            <Input clearable v-model="row.content" placeholder="请输入预扣率" style="width: 150px" disabled />
          </template>
          <template slot-scope="{ row }" slot="kouchu">
            <div v-if="row.level == '1'">
              <Input type="number" v-model="formValidate.deduction1">
              </Input>
            </div>
            <div v-if="row.level == '2'">
              <Input type="number" v-model="formValidate.deduction2">
              </Input>
            </div>
            <div v-if="row.level == '3'">
              <Input type="number" v-model="formValidate.deduction3">
              </Input>
            </div>
            <!-- <Input clearable v-model="row.kouchu" placeholder="请输入速算扣除数" style="width: 150px" /> -->
          </template>
        </Table>
      </FormItem>
      <FormItem label="备注">
          <span style="margin-right: 10px">劳务报酬所得，毎次收入不超过</span>
          <Input type="number" v-model="formValidate.tax3" @on-change="baochou(row)">
              <span slot="append">元</span>
            </Input>的，<span style="margin-right: 10px">减除费用按</span><Input type="number" v-model="formValidate.deduction4">
              <span slot="append">元</span>
            </Input>计算；
            <span style="margin-right: 10px">毎次收入</span><Input type="number" v-model="title6" disabled>
              <span slot="append">元</span>
            </Input>以上的，减除费用按20%计算。
      </FormItem>
      <FormItem label=" ">
        劳务报酬所得应预扣预缴税额=预扣预缴应纳税所得额×预扣率-速算扣除数
      </FormItem>
      <!-- <FormItem label="示例">
        （1）单次提现3000元<br>
            预扣预缴所得税=（3000-800）×20%-0=440元<br>
        （2）单次提现5000元<br>
            预扣预缴所得税=5000×（1-20%）×20%-0=800元<br>
        （3）单次提现30000元<br>
            预扣预缴所得税=30000×（1-20%）×30%-2000=5200元<br>
        （4）单次提现100000元
            预扣预缴所得税=100000×（1-20%）×40%-7000=25000元<br>
      </FormItem> -->
      <div class="label-btns">
        <Button type="primary" @click="submit('formValidate')">保存</Button>

      </div>
    </Form>
  </div>
</template>
<script>
import { setSetting } from "@/api/index";
import { handleSubmit } from "./validate";
export default {
  data() {
    return {
      formValidate: { // 表单数据
        apply: true,
        tax1: 1,
        tax2: 1,
        tax3: 1,
        deduction1: 1,
        deduction2: 1,
        deduction3: 1,
        deduction4: 1
      },

      switchTitle: "提现审核是否开启", // 切换title
      data: [
        {
          level: '1',
          title: '',
          content: 20,
          kouchu: ''
        },
        {
          level: '2',
          title: '',
          content: '30',
          kouchu: ''
        },
        {
          level: '3',
          title: '',
          content: 40,
          kouchu: ''
        }
      ],
      columns: [
        // 表头
        {
          title: "级数",
          key: "level",
          tooltip: true,
        },
        {
          title: "预扣预缴所得额",
          key: "title",
          tooltip: true,
          slot: "title",
          width: 600,
        },
        {
          title: "预扣率（%）",
          key: "content",
          tooltip: true,
          slot: "ownerCardno",
        },
        {
          title: "速算扣除数",
          key: "kouchu",
          tooltip: true,
          slot: "kouchu",
        },
      ],
      title2: 1,
      title4: 1,
      title6: 1
    };
  },
  created() {
    this.init();
  },
  props: ["res", "type"],
  methods: {
    chaoguo() {
      this.title2 = this.formValidate.tax1
    },
    nochao() {
      this.title4 = this.formValidate.tax2
    },
    baochou() {
      this.title6 = this.formValidate.tax3
    },
    // 保存
    submit(name) {
      let that = this;
       if( handleSubmit(that, name )){
        this.setupSetting()
      }
    },
    // 保存设置
    setupSetting() {
      if (Number(this.title2) > Number(this.formValidate.tax2)) {
        this.$Message.error("级数2的第一个值不能大于第二个值!");
        return
      }
      this.formValidate.tax1 = Number(this.formValidate.tax1)
      this.formValidate.tax2 = Number(this.formValidate.tax2)
      this.formValidate.tax3 = Number(this.formValidate.tax3)
      this.formValidate.deduction1 = Number(this.formValidate.deduction1)
      this.formValidate.deduction2 = Number(this.formValidate.deduction2)
      this.formValidate.deduction3 = Number(this.formValidate.deduction3)
      this.formValidate.deduction4 = Number(this.formValidate.deduction4)
      setSetting(this.type, this.formValidate).then((res) => {
        if (res.success) {
          this.$Message.success("保存成功!");
        } else {
          this.$Message.error("保存失败!");
        }
      });
    },
    // 实例化数据
    init() {
      this.res = JSON.parse(this.res);
      this.title2 = this.res.tax1
      this.title4 = this.res.tax2
      this.title6 = this.res.tax3
      this.$set(this, "formValidate", { ...this.res });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
/deep/ .ivu-form-item-content{
  align-items: center;
  padding-bottom: 5px;
}
</style>
<style>
.tixiansss .ivu-input-icon {
  position: absolute;
  right: -50px !important;
}
</style>
